<template>
	<div class="content">
		<p class="logo">
			<img src="/static/l_logo.png" alt="">
		</p>
		<button v-if="checkboxValue.length" class="get_phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNum">
			手机号快捷登录
      	</button>
		<p class="get_phone" v-else @click="submitLogin">
			手机号快捷登录
		</p>

		<p class="get_phone on" @click="back">
			暂不登录
		</p>
		<div class="xieyi">
			<u-checkbox-group
				size="14"
				v-model="checkboxValue"
				placement="column"
				activeColor="#23AC39"
			>
				<u-checkbox>
				</u-checkbox>
			</u-checkbox-group>
			<p @click="clickGou">登录即视为你同意<span @click="toXieyi">《服务条款》和《接单隐私政策》</span></p>
		</div>
	</div>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
	import api from '@/api';
	export default {
		data() {
			return {
				checkboxValue:[],
				shareUserId:''
			}
		},
		computed: {
			...mapState({
				token: state => state.user.token,
				userId: state => state.user.userId,
			})
		},
		onLoad(options) {
			console.log(options)
			if(options.shareUserId){
				this.shareUserId = options.shareUserId
			}else{
				this.shareUserId = ''
			}
		},
		methods: {
			...mapActions( ['updateUserTx','updateUserName']),

			toXieyi(){
				uni.navigateTo({
					url: `/pages/authorization/xieyi/index`
				});
			},

			back(){
				uni.navigateBack({
					delta: 1
				});
			},

			submitLogin(){
				if(!this.checkboxValue.length){
                    this.$toast('请同意《服务条款》和《接单隐私政策》!')
                    return
                }
			},

			clickGou(){
				if(this.checkboxValue.length){
					this.checkboxValue = []
				}else{
					this.checkboxValue = ['']
				}
			},

			getPhoneNum (e) {
				let { code } = e.mp.detail
				if (!e.target.encryptedData) {
					this.$toast('已取消~')
					return
				}
				if (e.target.errMsg !== 'getPhoneNumber:ok') {
					return false
				}
				uni.login({
					success: (res) => {
						console.log(res)
						if (res.code) {
							if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
								this.$showLoading('登录中...')
								let params = {
									phoneCode:code,
									loginCode:res.code,
									reference:this.shareUserId?this.shareUserId:'',
									state:1
								}
								this.$store.dispatch("userLogin", params).then(res=>{
									if(res.code == 200){
										api.user.get_sell_user({userId:this.userId}).then(res=>{
											if(res.code == 200){
												this.updateUserTx(res.data.avatar)
												this.updateUserName(res.data.nickname)
												uni.navigateBack({
													delta: 1
												})
												this.$toast('登录成功')
											}
										})
									}else{
										this.$toast(res.msg)
									}
								})
							} else {
								uni.hideLoading()
								this.$toast('已拒绝~')
							}
						} else {
							console.log('获取code失败~')
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.logo{
			width: 128rpx;
			height: 128rpx;
			background: #f7f7f7;
			border-radius: 50%;
			margin:136rpx auto 188rpx auto;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.get_phone{
			width: 74%;
			height: 86rpx;
			line-height: 86rpx;
			border-radius: 48rpx;
			background: #23AC39;
			font-size: 32rpx;
			color:#fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin:0 auto;
			img{
				width: 40rpx;
				height: 40rpx;
				margin-right:20rpx;
			}
			&.on{
				background:#fff;
				color:#23AC39;
				border:1px solid #23AC39;
				margin-top:40rpx;
			}
		}
		.xieyi{
			width: 100%;
			text-align: center;
			position: absolute;
			bottom:150rpx;
			font-size: 28rpx;
			color: #999999;
			display: flex;
			justify-content: center;
			span{
				color:#23AC39;
			}
			p{
				margin-top:-2rpx;
			}
		}
	}
</style>
